<template>
  <div>
    <div id="l-map"></div>
    <div id="r-result">地址:<input type="text" v-model="addressStr" id="suggestId" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <div class="search-ul">
        <div class="search-item">
            <div class="address-title">经度:</div> 
            <input v-model="longitude" placeholder="请输入关键字" >
        </div>
        <div class="search-item">
            <div class="address-title">纬度:</div> 
            <input v-model="latitude" placeholder="请输入关键字" >
        </div>  
    </div>
  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
  export default {
    data() {
      return {
         addressStr:''
      }
    },
    props:{
        address:{
            type: String,
            default: ''
        },
        longitude:{
            type: String,
            default: ''
        },
        latitude:{
            type: String,
            default: ''
        },
    },
    watch:{
        'longitude':function(){
            console.log(this.longitude)
            this.map()
        }
    },
    created() {

    },
    mounted() {
     this.map()
    },
    methods: {
        map(){
            var that = this;
            function G(id) {
                return document.getElementById(id);
            }
            var map = new BMap.Map("l-map");  
            var point = new BMap.Point(this.longitude,this.latitude);
	        map.centerAndZoom(point,18);         
			map.addOverlay(new BMap.Marker(point));
            var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                {"input" : "suggestId"
                ,"location" : map
            });
            setTimeout(()=>{
                that.addressStr = that.address
            },100)
 
            ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
                var _value = e.fromitem.value;
                var value = "";
                if (e.fromitem.index > -1) {
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }    
                str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
                
                value = "";
                if (e.toitem.index > -1) {
                    _value = e.toitem.value;
                    value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                }    
                str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                G("searchResultPanel").innerHTML = str;
            });

            var myValue;
            ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                var _value = e.item.value;
                myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                
                setPlace();
            });
            function setPlace(){
                map.clearOverlays();    //清除地图上所有覆盖物
                function myFun(){
                    var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                    map.centerAndZoom(pp, 18);
                    that.longitude = pp.lng;
                    that.latitude = pp.lat;
                    that.$emit('mapData',{
                        address:myValue,
                        longitude:that.longitude,
                        latitude:that.latitude
                    })
                    map.addOverlay(new BMap.Marker(pp));    //添加标注
                }
                var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
                });
                local.search(myValue);
                that.address = myValue;     
            }
        },
    }
  }

</script>

<style lang="scss" scoped>
    #l-map{height:400px;width:650px;}
    #r-result{width:100%;margin-top: 30px;font-size: 14px};
    .search-ul{
        margin-top: 30px;
        .search-item{
            float: left;
            margin-left: 0;
            margin-right: 15px;
            .address-title,input{
                float: left;
            }
        }
    }
    input{
            width: 300px;
            -webkit-appearance: none;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 1;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            margin-left: 20px;
        }

</style>
